<!--产品榜单管理-->
<template>
  <div class="app-container">
    <el-card>
      <el-form
        size="small"
        :inline="true"
        :model="searchForm"
        class="demo-form-inline"
      >
        <el-form-item label="产品榜单分类：">
          <el-select v-model="searchForm.cate" placeholder="请选择产品榜单分类">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否发布：">
          <el-select
            v-model="searchForm.publishStatus"
            placeholder="请选择是否发布"
          >
            <el-option
              v-for="item in publishOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
          <el-button type="primary" icon="el-icon-search" @click="searchList()"
            >查询</el-button
          >
        </el-form-item>
      </el-form>

      <el-button
        style="margin-bottom: 20px"
        size="mini"
        type="primary"
        icon="el-icon-plus"
        @click="addClick"
        >新增</el-button
      >
      <!--<el-button-->
      <!--    style="margin-bottom: 20px"-->
      <!--    size="mini"-->
      <!--    type="primary"-->
      <!--    icon="el-icon-delete"-->
      <!--    @click="deleteClick"-->
      <!--&gt;批量删除</el-button>-->

      <el-table
        v-loading="listLoading"
        :data="tableData.list"
        border
        size="small"
      >
        <el-table-column label="分类" align="center">
          <template slot-scope="scope">
            <div>
            {{ scope.row.cate == "hot" ? "热门产品" :scope.row.cate == "web_hot" ? "官网热门产品": "近期上新" }}

            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="产品"
          align="center"
          prop="productName"
        ></el-table-column>
        <el-table-column
          label="标题"
          align="center"
          prop="title"
        ></el-table-column>
        <el-table-column
          label="内容"
          align="center"
          prop="content"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          label="链接"
          align="center"
          prop="url"
        >
        <template slot-scope="scope">
            <div
              v-if="scope.row.type == 2"
              >无</div>
            <div v-else-if="scope.row.type == 1">

            </div>
            <div v-else>
                {{ scope.row.url }}
            </div>

          </template>
      </el-table-column>
        <el-table-column
          label="创建时间"
          align="center"
          prop="createTime"
        ></el-table-column>
        <el-table-column label="是否上架" align="center">
          <template slot-scope="scope">
            <el-switch
              :active-value="1"
              :inactive-value="0"
              v-model="scope.row.publishStatus"
              @change="changeStatus(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              :disabled="scope.row.publishStatus == 1"
              @click="updateClick(scope.row)"
              >修改</el-button
            >
            <el-button type="text" @click="deleteLineClick(scope.row)"
              >删除</el-button
            >
            <el-button
              type="text"
              :disabled="scope.$index == 0"
              @click="upClick(scope.$index, scope.row)"
              >上移</el-button
            >
            <el-button
              type="text"
              :disabled="upCount(scope.$index)"
              @click="downClick(scope.$index, scope.row)"
              >下移</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <add-ranking ref="rank" @getList="getList"></add-ranking>

      <el-pagination
        class="pageRight"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="searchForm.pageSize"
        :total="tableData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
import {
  settleMentDeleteApi,
  settleMentRuleApi
} from "@/api/commission";
import AddRanking from "./components/addRanking.vue";
import {
  deleteProductRankApi,
  moveProductRankApi,
  productRankListApi,
  upProductRankApi
} from "@/api/rank";

export default {
  components: { AddRanking },
  data() {
    return {
      searchForm: {
        pageNum: 1,
        pageSize: 10,
        cate: "",
        publishStatus: ""
      },
      options: [],
      publishOptions: [
        {
          value: "1",
          label: "是"
        },
        {
          value: "0",
          label: "否"
        }
      ],
      tableData: {
        total: 0,
        list: []
      },
      listLoading: false
    };
  },
  async created() {
    this.options = await this.$getDictData("rank_product_cate");
    await this.getList();
  },
  methods: {
    searchList() {
      this.searchForm.pageNum = 1;
      this.getList();
    },
    // 新增
    addClick() {
      this.$refs.rank.openDialog();
    },
    // 批量删除
    deleteClick() {},
    // 是否上下架
    changeStatus(v) {
      console.log(v, "vvvv");
      upProductRankApi({
        ids: [v.id],
        publishStatus: v.publishStatus
      }).then(res => {
        this.$message.success("操作成功");
        this.getList();
      });
    },
    // 修改
    updateClick(row) {
      this.$refs.rank.openDialog(row);
      // this.$refs.rank.addForm = row
    },
    upCount(idx) {
      let flag = false;
      if (
        this.searchForm.pageSize - 1 == idx ||
        (this.tableData.list.length < this.searchForm.pageSize &&
          idx == this.tableData.list.length - 1)
      ) {
        flag = true;
      }
      return flag;
    },
    // 删除
    deleteLineClick(row) {
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteProductRankApi(row.id).then(() => {
          this.$message.success("删除成功！");
          this.getList();
        });
      });
    },
    upClick(idx, v) {
      let params = {
        pid: v.id,
        tid: this.tableData.list[idx - 1].id
      };
      moveProductRankApi(params).then(res => {
        if (res.code == 200) {
          this.$message.success("修改成功");
          this.getList();
        }
      });
    },
    downClick(idx, v) {
      let params = {
        pid: v.id,
        tid: this.tableData.list[idx + 1].id
      };
      moveProductRankApi(params).then(res => {
        if (res.code == 200) {
          this.$message.success("修改成功");
          this.getList();
        }
      });
    },
    // 重置
    reset() {
      this.searchForm = {
        pageNum: 1,
        pageSize: 10,
        cate: "",
        publishStatus: ""
      };
      this.getList();
    },
    // 查询
    getList() {
      this.listLoading = true;
      productRankListApi(this.searchForm)
        .then(res => {
          this.tableData.list = res.data.list;
          this.tableData.total = res.data.total;
        })
        .finally(() => {
          this.listLoading = false;
        });
    },
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.searchForm.pageNum = val;
      this.getList();
    }
  }
};
</script>

<style lang="scss" scoped></style>
